<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Reading List</title>
    <link rel="stylesheet" th:href="@{/style.css}"></link>
</head>

<body>
<h2>Your Reading List</h2>
<div th:unless="${#lists.isEmpty(books)}">
    <dl th:each="book : ${books}">
        <dt class="bookHeadline">
            <span th:text="${book.title}">Title</span> by
            <span th:text="${book.author}">Author</span>
            (ISBN: <span th:text="${book.isbn}">ISBN</span>)
        </dt>
        <dd class="bookDescription">
          <span th:if="${book.description}"
                th:text="${book.description}">Description</span>
            <span th:if="${book.description eq null}">
                No description available</span>
        </dd>
    </dl>
</div>
<div th:if="${#lists.isEmpty(books)}">
    <p>You have no books in your book list</p>
</div>


<hr/>

<h3>Add a book</h3>
<form method="POST">
    <label for="title">Title:</label>
    <input type="text" name="title" size="50" id="title"></input><br/>
    <label for="author">Author:</label>
    <input type="text" name="author" size="50" id="author"></input><br/>
    <label for="isbn">ISBN:</label>
    <input type="text" name="isbn" size="15" id="isbn"></input><br/>
    <label for="description">Description:</label><br/>
    <textarea name="description" cols="80" rows="5" id="description"></textarea><br/>
    <input type="submit"></input>
</form>

</body>
</html>